<template>
    <div class="order-goods">
        <div class="goods-all">
            <div class="goods-content">
                <img :src="good.pic">
                <div class="goods-body">
                    <div class="top">
                        <div class="goods-name">{{good.name}}</div>
                        <div class="goods-price" v-if="type === 2">零钱：{{good.price | moneyFmt(2, '')}}</div>
                        <div class="goods-price" v-else>{{good.price | moneyFmt(2, '￥')}}</div>
                    </div>
                    <div class="middle">
                        <div class="goods-title">{{good.title}}</div>
                        <div class="goods-num">x{{good.num}}</div>
                    </div>
                    <div class="bottom">
                        <div class="goods-spec">规格：{{good.tags}}</div>
                        <div class="sev" v-if='isup == 1'>7天无理由退货</div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="remark-container">
                <!-- v-else-->
                <span class="remark-title">备注：</span>
                <!--<input type="text" class="remark" placeholder="点击添加备注信息（50字以内，选填）"maxlength="50" v-model="remark">-->
                <textarea readonly class="remark-readonly" maxlength="50" v-text="good.remark" v-if="remarkShow">
                </textarea>
                <textarea class="remark" placeholder="点击添加备注信息（50字以内，选填）" maxlength="50" v-model="remark" v-else>
                </textarea>
            </div>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "order-single-goods",
    props: {
        good: {
            type: Object
        },
        isup: {
            type: Number
        },
        index: {
            type: Number
        },
        type: {
            type: Number
        },
        remarkShow: {
            type: Boolean
        }
    },
    data() {
        return {
            remark: '',
        }
    },
    created() {
    },
    computed: {},
    methods: {},
    watch: {
        remark(val) {
            let reData = {
                'remark': val,
                'index': this.index
            }
            this.$emit('gotRemark', reData)
        }
    }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/main.styl';

.line {
    line();
}

.goods-content {
    padding: cellPadding;
    height: vw(60);
    display: flex;
    position: relative;
    align-items: center;

    /* border-bottom 1px solid #f8f8f8 */
    img {
        width: vw(60);
        height: vw(60);
    }

    .goods-body {
        position: relative;
        height: vw(60);
        padding-left: smallMargin;
        flex: 1;

        .top {
            display: flex;
            justify-content: space-between;
            font-size: word14;
            line-height: vw(19);

            .goods-name {
                color: gray3;
            }

            .goods-price {
                color: main-color;
            }
        }

        .middle {
            display: flex;
            justify-content: space-between;

            .goods-title {
                word-vw(word12, gray9);
                line-height: vw(16);
            }

            .goods-num {
                color: gray9;
            }
        }

        .bottom {
            display: flex;
            justify-content: flex-start;
            margin-top: smallMargin;
            line-height: vw(16);
            font-size: word12;

            .goods-spec {
                color: gray6;
            }

            .goods-remark {
                color: gray6;

                .expandmore {
                    width: vw(8);
                    height: vw(5);
                }
            }

            .sev {
                word-vw(12px, main-color);
                margin-left: 2vw;
                border: 1px solid main-color;
                border-radius: all-radius;
                line-height: vw(17);
                padding: 0 2vw;
            }
        }
    }
}

.remark-container {
    width: 100vw;
    height: vw(40);
    margin-top: 0;
    padding-left: cellPadding;
    display: flex;
    align-items: center;
    word-vw(word14, gray3);
    line-height: vw(19);
    background-color: grayF;

    .remark-title {
        // padding-top vw(10)
    }

    .remark {
        /* border none */
        box-sizing: border-box;
        color: gray9;
        width: 80%;
        height: vw(20);
        flex-wrap: wrap;
        /* border slateblue 1px solid */
    }

    .remark-readonly {
        border: none;
        box-sizing: border-box;
        word-vw(word14, gray3);
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        height: vw(30);
        padding-top: vw(5);
    }
}

::-webkit-input-placeholder { /* WebKit browsers */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
}
</style>
